<template>
  <el-form ref="form" class="form" :model="formData" :rules="rules">
    <el-form-item prop="curuser_pwd">
      <div class="line text">{{ $t("yonghuguanli.curuser_pwd") }}:</div>
      <PasswordInput v-model="formData.curuser_pwd" />
    </el-form-item>
    <el-form-item prop="user_pwd">
      <div class="line text">{{ $t("yonghuguanli.user_pwd") }}:</div>
      <PasswordInput v-model="formData.user_pwd" />
    </el-form-item>
    <el-form-item prop="confirm_pwd">
      <div class="line text">{{ $t("yonghuguanli.confirm_pwd") }}:</div>
      <PasswordInput v-model="formData.confirm_pwd" />
    </el-form-item>
    <el-button
      class="line"
      :loading="modifyPwdLoading"
      @click.native="handleChangePwd"
      >{{ $t("common.confirm") }}</el-button
    >
  </el-form>
</template>

<script>
import { updateUser } from "@/views/yonghuguanli/user/service";
import util from "@/utils";
export default {
  props: {
    defaultData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    defaultData:{
      handler(val) {
        this.formData = { user_name:val.user_name,curuser_pwd:val.user_pwd };
      },
      immediate:true,
      deep:true
    },
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("yonghuguanli.confirm_pwd_promit")));
      } else if (value !== this.formData.user_pwd) {
        callback(new Error(this.$t("yonghuguanli.pwd_diffrence_promit")));
      } else {
        callback();
      }
    };
    const validateUserPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("yonghuguanli.user_pwd_promit")));
      } else if (value.length < 8) {
        callback(new Error(this.$t("yonghuguanli.user_pwd_length_promit")));
      } else if (
        /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W_]).{8,}$/.test(value) === false
      ) {
        callback(new Error(this.$t("yonghuguanli.user_pwd_format_promit")));
      } else {
        callback();
      }
    };
    return {
      formData: {},
      rules: {
        user_name: [
          {
            required: true,
            message: this.$t("login.usernameTip"),
            trigger: "blur",
          },
        ],
        group_id: [
          {
            required: true,
            message: this.$t("yonghuguanli.role_empty_promit"),
            trigger: "change",
          },
        ],
        curuser_pwd: [
          {
            required: true,
            message: this.$t("yonghuguanli.curuser_pwd_promit"),
            trigger: "change",
          },
        ],
        user_pwd: [
          {
            validator: validateUserPass,
            trigger: "change",
          },
        ],
        confirm_pwd: [
          {
            validator: validatePass,
            trigger: "change",
          },
        ],
      },
      modifyPwdLoading: false,
    };
  },
  methods: {
    handleChangePwd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.modifyPwdLoading = true;
          const params = {
            ...this.formData,
            confirm_pwd: void 0,
          };
          updateUser(params)
            .then((res) => {
              if (res.code === 0) {
                util.msg.success("edit_success");
                this.$emit('updatePwdSuccess')
              }
            })
            .finally(() => {
              this.modifyPwdLoading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  margin-top: 30px;
  width: 387px;
  display: flex;
  flex-direction: column;
  /deep/ .el-form-item__content {
    margin-left: 0;
    .pwd-box {
      width:auto;
    }
  }
  .line {
    margin-bottom: 20px;
    width: 387px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
    font-family: MicrosoftYaHei-Regular;
    font-weight: NaN;
    white-space: nowrap;
    line-height: 24px;
    position: relative;
    .checked {
      position: absolute;
      width: 27px;
      height: 25px;
      left: 0;
      top: 0;
      background: url("./assets/img/checked.png") no-repeat center;
      background-size: 100%;
      cursor: pointer;
    }
    /deep/ .el-checkbox__input.is-checked {
      visibility: hidden;
    }
    &.text {
      width: 387px;
      height: 24px;
    }
    &.password-line {
      position: relative;
      /deep/ .eye {
        cursor: pointer;
        position: absolute;
        right: 20px !important;
        top: 50%;
        transform: translateY(-50%);
        width: 29px;
        height: 16px;
        background: url(./assets/img/eye.png) 100% no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .el-input--middle {
    font-size: 24px;
  }
  /deep/ .el-input {
    background-color: rgba(242, 242, 242, 1);
    border-radius: 26px;
    width: 387px;
    height: 52px;
    input {
      background-color: rgba(242, 242, 242, 1);
      border-radius: 26px;
      width: 387px;
      height: 52px;
    }
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0aa29f;
    border-color: #0aa29f;
  }
  /deep/ .el-checkbox__inner {
    width: 27px;
    height: 25px;
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label,
  /deep/ .el-checkbox__label {
    color: #fff;
    font-size: 25px;
    line-height: 25px;
  }
  /deep/ .el-checkbox__input {
    vertical-align: bottom;
  }
  /deep/ .el-checkbox__inner::after {
    height: 21px;
    left: 12px;
  }
  .el-button {
    background-color: rgba(10, 162, 159, 1);
    border-radius: 30px;
    height: 60px;
    width: 387px;
    border: none;
  }
}
</style>
